<template>
	<div>
		<div class="tabs">
			<el-row>
				<el-button type="info" @click="onSubmit('2,3,4,5')">所有赛事</el-button>
				<el-button type="warning" @click="onSubmit('2,3')">未发布</el-button>
				<el-button type="success" @click="onSubmit('4')">已发布</el-button>
				<el-button type="primary" @click="onSubmit('5')">已结束</el-button>
			</el-row>
			<div class="search">
				<el-input v-model="form.keyword" @keyup.enter.native="onSubmit" placeholder="请输入赛事名称"></el-input>
				<el-button type="primary" class="button" @click="onSubmit">搜索</el-button>
			</div>
		</div>
		<div class="line"></div>
		<div class="matchList">
			<div class="matchLists" v-for="(itme, index) in MatchShowList" :key="index">
				<div class="left">
					<img src="" alt="">
					<div>
						<p class="title">{{itme.name}}</p>
						<p><span>主办单位：</span>{{itme.host}}</p>
						<p><span>比赛开始时间</span>{{itme.start_time}}</p>
					</div>
				</div>
				<div class="right">
					<p class="status" :class="{'og': itme.status==2 || itme.status==3, 'os': itme.status==4, 'od': itme.status==5}">
						<span v-if="itme.status==2">未发布</span>
						<span v-if="itme.status==3">未发布</span>
						<span v-if="itme.status==4">已发布</span>
						<span v-if="itme.status==5">已结束</span>
					</p>
					<p class="checkdetails" @click="checkdetails(itme.id)">查看详情>></p>
				</div>
			</div>
		</div>
		<el-pagination background layout="prev, pager, next" :total="total" @current-change="ChangePage" style=" float: right;margin-top: 10px; margin-bottom: 40px; margin-right: 150px;">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					keyword: '',
					state: '2,3,4,5',
				},
				tableData: [],
				total: null,
				currentPage: 0,
				MatchShowList: []
			}
		},
		created() {
			this.get_allclub()
		},
		methods: {
			onSubmit(state) {
				this.form.state = state
				this.currentPage = 0
				this.get_allclub()
			},
			get_allclub() {
				this.$axios.post('/UserManage/host_com_info', {
						search: this.form.keyword,
						club_id: this.$route.query.organizationId,
						status: this.form.state,
						page: this.currentPage
					}, {
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					})
					.then(res => {
						if (res.data.code == 2000 || res.data.code == 2001) {
							this.tableData = res.data.data
							this.total = res.data.data.length
							this.MatchShowList = this.tableData.slice((this.currentPage) * 10, (this.currentPage) * 10 + 10)
						}
					})
					.catch(error => {
						console.log(error)
					});
			},
			ChangePage(page) {
				this.currentPage = parseInt(page) - 1
				this.MatchShowList = this.tableData.slice((page - 1) * 10, (page - 1) * 10 + 10)
				console.log(this.MatchShowList)
			},
			checkdetails(id) {
				// this.$router.push({
				// 	path: '/index/user/organizationMatchDetails',
				// 	query: {
				// 		matchId: id
				// 	}
				// })
			}
		}
	}
</script>

<style lang="less" scoped>
	.tabs {
		display: flex;
		justify-content: space-between;
		margin-top: 36px;
		margin-left: 40px;
		margin-right: 100px;

		.search {
			display: flex;
			justify-content: space-between;
			width: 300px;

			.button {
				margin-left: 16px;
			}
		}
	}

	.line {
		width: 95%;
		border-top: 1px #dcdfe6 dotted;
		margin-top: 33px;
		margin-bottom: 36px;
	}

	.matchList {
		margin-left: 40px;
		margin-right: 100px;

		.matchLists {
			display: flex;
			justify-content: space-between;
			border: 1px #dcdfe6 dotted;
			margin-bottom: 20px;
			padding: 10px;

			.left {
				display: flex;
				justify-content: space-between;
				align-items: center;

				p {
					margin: 10px 0;
				}

				img {
					display: inline-block;
					width: 78px;
					height: 70px;
					margin-right: 15px;
				}

				.title {
					font-weight: bold;
				}
			}

			.right {
				margin-right: 56px;

				.status {
					margin-bottom: 46px;
				}

				.checkdetails {
					cursor: pointer;
				}
			}
		}
	}

	.og {
		border: 1px #ff8200 solid;
		color: #ff8200;
		text-align: center;
	}

	.os {
		border: 1px #ffbd00 solid;
		color: #ffbd00;
		text-align: center;
	}

	.od {
		border: 1px #579c00 solid;
		color: #579c00;
		text-align: center;
	}
</style>
